<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>经验反馈</el-breadcrumb-item>
      <el-breadcrumb-item>添加经验反馈</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-form ref="addFormRef" :model="addForm" label-width="150px" class="addForm" :rules="addFormRules">
        <el-form-item label="大修轮次" prop="outage">
          <el-select v-model="addForm.outage" filterable placeholder="请选择大修轮次" clearable>
            <el-option v-for="outage in outages" :key="outage.id" :label="outage.outage" :value="outage.outage"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称" prop="team">
          <el-select v-model="addForm.team" filterable placeholder="请选择项目名称" clearable>
            <el-option v-for="team in teams" :key="team.id" :label="team.name" :value="team.name"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="事件标题" prop="title">
          <el-input v-model="addForm.title" placeholder="请输入事件标题" clearable></el-input>
        </el-form-item>
        <el-form-item label="事件描述" prop="detail">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 8 }" placeholder="请输入事件详细信息" v-model="addForm.detail"> </el-input>
        </el-form-item>
        <el-form-item label="发生日期" prop="occurDate">
          <el-date-picker v-model="addForm.occurDate" align="right" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
        </el-form-item>
        <el-form-item label="原因分析" prop="reason">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 8 }" placeholder="请输入原因分析内容" v-model="addForm.reason"> </el-input>
        </el-form-item>
        <el-form-item label="反馈措施" prop="measure">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 8 }" placeholder="请输入反馈措施内容" v-model="addForm.measure"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="createFeedBack">立即创建</el-button>
          <el-button @click="resetAddForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addForm: {
        outage: '',
        team: '',
        title: '',
        detail: '',
        occurDate: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(),
        reason: '',
        measure: ''
      },
      addFormRules: {
        outage: [{ required: true, message: '请选择大修轮次', trigger: 'blur' }],
        team: [{ required: true, message: '请选择项目组', trigger: 'blur' }],
        title: [
          { required: true, message: '请输入事件标题', trigger: 'blur' },
          { min: 1, max: 40, message: '最多输入40个字', trigger: 'blur' }
        ],
        detail: [
          { required: true, message: '请输入事件详细描述', trigger: 'blur' },
          { min: 1, max: 1000, message: '最多输入1000个字', trigger: 'blur' }
        ],
        occurDate: [{ required: true, message: '请输入事件发生时间', trigger: 'blur' }],
        reason: [
          { required: true, message: '请输入原因分析', trigger: 'blur' },
          { min: 1, max: 1000, message: '最多输入1000个字', trigger: 'blur' }
        ],
        measure: [
          { required: true, message: '请输入反馈措施', trigger: 'blur' },
          { min: 1, max: 1000, message: '最多输入1000个字', trigger: 'blur' }
        ]
      },
      outages: [],
      teams: [],
      feedback_types: [],
      fail_types: [],
      result_types: [],
      event_characters: [],
      extraInfo: ''
    }
  },
  created() {
    this.getBaseInfo()
  },
  methods: {
    async getBaseInfo() {
      const { data: res } = await this.$http.get('baseinfo/feedbackinfo/')
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$http.error('获取添加经验反馈时的基本信息失败！')
      }
      this.outages = res.data.outages
      this.teams = res.data.teams
      this.feedback_types = res.data.feedback_types
      this.fail_types = res.data.fail_types
      this.result_types = res.data.result_types
      this.event_characters = res.data.event_characters
    },
    // 创建经验反馈
    async createFeedBack() {
      const { data: res } = await this.$http.post('feedback/addfeedback/', this.addForm)
      if (res.meta.status !== 200) {
        return this.$message.error('添加失败')
      }
      this.$message.success('添加经验反馈成功！')
      this.$router.push('/feedback')
    },
    // 重置表格
    resetAddForm() {
      this.$refs.addFormRef.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.addForm {
  width: 50%;
  .el-select {
    width: 100%;
  }
}
</style>
